<!-- 引入notifications的模板标签 -->
{% load notifications_tags %}
{% notifications_unread as unread_count %}

<!--定义导航栏-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- 导航栏商标-->
        <a class="navbar-brand" href="{% url 'article:article_list' %}">我的博客</a>

        <!-- 导航入口-->
        <div>
            <ul class="navbar-nav">
                <!-- 条目-->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_create' %}">写文章</a>
                </li>
<!--                 <li class="nav-item">-->
<!--                    <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>-->
<!--                 </li>-->
                <!-- Django的 if 模板语句 -->
                {% if user.is_authenticated %}
                    <!-- 如果用户已经登录，则显示用户名下拉框 -->
                     <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle"data-target="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="open_dropdown()">
                            <!-- 小红点 -->
                            {% if unread_count %}
                                <svg viewBox="0 0 8 8"
                                     width="8px"
                                     height="8px">
                                    <circle cx="4"
                                            cy="4"
                                            r="4"
                                            fill="#ff6b6b"
                                            ></circle>
                                </svg>
                            {% endif %}
                            {{ user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!-- 通知计数 -->
                             <a class="dropdown-item" href="{% url 'notice:list' %}">通知...
                                {% if unread_count %}
                                    <span class="badge badge-danger">{{ unread_count }}</span>
                                {% endif %}
                            </a>
                            <a class="dropdown-item" href="{% url 'userprofile:edit' user.id %}">个人信息</a>
                            <a class="dropdown-item" href="{% url 'userprofile:logout' %}">退出登录</a>
                            <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>
                        </div>
                     </li>
                <!-- 如果用户未登录，则显示 “登录” -->
                {% else %}
                    <li class="nav-item">
                        <a href="{% url 'userprofile:login' %}" class="nav-link">登录</a>
                    </li>
                <!-- if 语句在这里结束 -->
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<!-- 删除用户 -->
{% if user.is_authenticated %}
<form
        style="display:none;"
        id="user_delete"
        action="{% url 'userprofile:delete' user.id %}"
        method="post">
    {% csrf_token %}
    <button type="submit">发送</button>
</form>

<script>
    function user_delete(){
        //调用layer弹窗组件
        layer.open({
            title: "确认删除",
            content: "确认删除用户资料吗？",
            yes: function(index, layero) {
                $('form#user_delete button').click();
                layer.close(index);
            },
        })
    }

    function open_dropdown(){
        $('.dropdown-toggle').dropdown()
    }
</script>
{% endif %}


<!--<script>-->
<!--    function open_dropdown(){-->
<!--        $('.dropdown-toggle').dropdown()-->
<!--    }-->
<!--</script>-->
